6<template>
  <div class="detaile-item">
    <van-nav-bar
      title="热门推送"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="box">
      <van-cell to="article/1">
        <h3>宝宝一喝奶粉就拉肚子？</h3>
        <h4>从这五个方面找原因？点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
        </div>
      </van-cell>
      <van-cell to="article/2">
        <h3>低钠盐、粉盐有啥不一样？</h3>
        <h4>我们又该怎么吃盐？点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
        </div>
      </van-cell>
      <van-cell class="finish">
        <img src="https://s3.ax1x.com/2021/03/13/6wZa40.png" alt="" />
        <h4>狂欢开抢，省钱券包17.8抵60，给女神安排！</h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
          <div class="hydrated">已结束</div>
        </div>
      </van-cell>
      <van-cell to="article/3">
        <h3>医院提醒盲目解救三大误区，可巧用水果护肝</h3>
        <h4>专家教你几招，增强免疫力。点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
        </div>
      </van-cell>
      <van-cell class="finish">
        <img src="https://s3.ax1x.com/2021/03/13/6wZUNq.png" alt="" />
        <h4>再忙，别忘了家里的她；她的节日，给她一点仪式感！点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
          <div class="hydrated">已结束</div>
        </div>
      </van-cell>
      <van-cell class="finish">
        <img src="https://s3.ax1x.com/2021/03/13/6wZa40.png" alt="" />
        <h4>今年的运气与浪漫，就在今天爆棚！点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
          <div class="hydrated">已结束</div>
        </div>
      </van-cell>
      <van-cell to="article/7">
        <h3>厨房不要买这4样电器，入住才知费钱不实用！</h3>
        <h4>我们又该怎么购买？点击查看>></h4>
        <div class="details">
          <span>2021-03-08 18:03:49</span>
          <span class="details-span">查看详情</span>
        </div>
      </van-cell>
    </div>
    <van-divider
      dashed
      :style="{
        margin: '0 auto',
        color: '#888',
        width: '200px',
        borderColor: '#999',
        padding: '0 16px',
      }"
      >仅展示最新消息</van-divider
    >
  </div>
</template>

<script>
export default {
  name: "detaileDpersonnel",
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
* {
  margin: 0px;
  padding: 0px;
}
.detaile-item {
  .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
  }
  .finish {
    background: rgba(4, 0, 0, 0.12);
    position: relative;
    .hydrated {
      position: absolute;
      width: 71px;
      height: 30px;
      background-color: red;
      top: 0px;
      right: -20px;
      line-height: 30px;
      text-align: center;
      transform: rotate(45deg);
      color: #adb5c0;
      background-color: #605f5f;
    }
  }
  img {
    width: 100%;
    height: 120px;
  }
  .box {
    padding: 0 10px;
    margin-top: 55px;
    .van-cell {
      margin: 10px 0;
      padding: 10px;
      //   height: 100px;
      h3 {
        margin: 5px 0;
      }
      h4 {
        font-size: 10px;
        font-weight: 400;
      }
      .details {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #828a98;
        .details-span {
          color: #666;
        }
      }
    }
  }
}
</style>
